<template>
  <scroll
    class="suggest"
    :data="songs"
    ref="suggest"
    :pullup="pullup"
    :beforeScroll="beforeScroll"
    @scrollToEnd="searchMore"
    @beforeScroll="listScroll"
  >
    <!-- <div class="clearbox"></div> -->
    <ul class="suggest-list">
      <li>
        <div class="search-suggest" v-show="query && songs.length > 0">
          <p class="title" v-show="showSinger">最佳匹配</p>
          <div @click="selectItems(suggest.artists[0])" class="search-suggest-item" v-if="suggest.artists && showSinger">
            <img :src="suggest.artists[0].img1v1Url" width="50" height="50">
            <span>歌手：{{suggest.artists[0].name}}</span>
          </div>
          <div @click="selectList(suggest.playlists[0])" class="search-suggest-item" v-if="suggest.playlists">
            <img :src="suggest.playlists[0].coverImgUrl" width="50" height="50">
            <div class="text">
              <p>歌单：{{suggest.playlists[0].name}}</p>
              <p class="singer">{{suggest.albums[0].artist.name}}</p>
            </div>
          </div>
        </div>
      </li>
      <li @click="selectItem(item)" class="suggest-item" v-for="(item, index) in songs" :key="index">
        <div class="icon">
          <i></i>
        </div>
        <div class="name">
          <p class="song">{{item.name}}</p>
          <p class="singer">{{item.singer}}</p>
        </div>
      </li>
      <li>
        <div v-show="!songs.length && query && hasMore" class="no-result-wrapper">
          抱歉，暂无搜索结果
        </div>
      </li>
    </ul>
  </scroll>
</template>

<script type="text/javascript">
import { getSearchSongs, getSearchSuggest, getSongDetail } from '@/api/search'
import { createSearchSong } from '@/common/js/song'
import Singer from '@/common/js/sing'
import Scroll from '@/base/scroll/scroll'
import { mapMutations, mapActions } from 'vuex'
export default {
  props: {
    query: {
      type: String,
      default: ''
    },
    showSinger: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      page: 0,
      songs: [],
      pullup: true,
      // 表示是否加载完
      hasMore: true,
      suggest: {},
      beforeScroll: true
    }
  },
  methods: {
    // getIconCls (item) {

    // },
    selectItems (item) {
      const singer = new Singer({
        id: item.id,
        name: item.name,
        avatar: item.img1v1Url
      })
      this.$router.push({
        path: `/search/singer/${singer.id}`
      })
      this.setSinger(singer)
      console.log(1)
    },
    selectList () {
      console.log(2)
    },
    search () {
      this.hasMore = true
      this.$refs.suggest.scrollTo(0, 0)
      getSearchSongs(this.query, this.page).then((res) => {
        console.log(res)
        var list = res.data.result.songs
        var ret = []
        list.forEach((item) => {
          ret.push(createSearchSong(item))
        })
        this.songs = ret
        this._checkMore(this.songs)
      })
      this.page += 30
      console.log(this.songs)
      getSearchSuggest(this.query).then((res) => {
        this.suggest = res.data.result
      })
    },
    _checkMore (data) {
      const song = data
      if (!song.length) {
        this.hasMore = false
      }
    },
    // 滚动到底部触发
    searchMore () {
      if (!this.hasMore) {
        return
      }
      // this.page += 30
      console.log(this.suggest)
      getSearchSongs(this.query, this.page).then((res) => {
        var list = res.data.result.songs
        if (!res.data.result.songs) {
          this.hasMore = false
          return
        }
        var ret = []
        list.forEach((item) => {
          ret.push(createSearchSong(item))
        })
        this.songs = this.songs.concat(ret)
        this.$emit('refresh')
        this.page += 30
      })
    },
    selectItem (item) {
      getSongDetail(item.id).then((res) => {
        item.image = res.data.songs[0].al.picUrl
        this.inserSong(item)
      })
      this.$emit('select')
      console.log(item)
    },
    listScroll () {
      this.$emit('listScroll')
    },
    ...mapMutations({
      setSinger: 'SET_SINGER'
    }),
    ...mapActions([
      'inserSong'
    ])
  },
  watch: {
    query () {
      this.search()
      this.page = 0
      this.suggest = {}
      this.songs = []
      console.log(this.$refs.suggest)
    }
  },
  components: {
    Scroll
  }
}
</script>

<style lang="less" scoped>
@import "~@/common/stylus/variable";
/*@import "~common/scss/mixin";*/

ul {
  padding: 0;
  margin: 0;
}
.clearbox {
  clear: both;
}
.suggest {
  height: 100%;
  overflow: hidden;
  .search-go {
    font-size: @font-size-medium;
    margin-left: 20px;
    color: @color-theme;
  }
  .search-suggest {
    .title {
      padding-left: 20px;
      padding-bottom: 10px;
      color: @color-theme;
      font-size: 11px;
    }
    .search-suggest-item {
      display: flex;
      align-items: center;
      padding: 8px 20px;
      border-bottom: 1px solid rgb(228, 228, 228);
      font-size: @font-size-medium;
      img {
        flex: 0 0 50px;
        padding-right: 15px;
      }
      .text {
        width: 100%;
        p {
          padding: 3px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .singer {
          font-size: 12px;
          color: @color-text;
        }
      }
    }
  }
  .suggest-list {
    padding-bottom: 140px;
    .suggest-item {
      display: flex;
      padding: 3px 20px;
      height: 50px;
      align-items: center;
      border-bottom: 1px solid rgb(228, 228, 228);
      p {
        padding: 3px 0;
      }
      .song {
        font-size: @font-size-medium-x;
        color: @color-text;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-bottom: -7px
      }
      .singer {
        font-size: 12px;
        color: @color-text-g;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .icon {
      // flex: 0 0 30px
      // width: 30px
      [class^="icon-"] {
        font-size: 14px;
        color: @color-text;
      }
    }
    .name {
      flex: 1;
      font-size: @font-size-medium;
      color: @color-text;
      overflow: hidden;
      .text {
       text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}
.no-result-wrapper {
  position: fixed;
  overflow: hidden;
  left: 50%;
  top: 40vh;
  transform: translatex(-50%);
  color: @color-text;
}
p{
  margin: 0;
}
</style>
